<template> 
    <div>
        <section ion class="container-main-header">
            <section class="header-left disFlex">
              <i class="el-icon-menu"></i>
              <span>首页</span>/
              <span>商品</span>/
              <span>添加商品分类</span>
              <i class="el-icon-pear"></i>
            </section>
        </section>
        <section class="main">
              <el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
                <el-form-item label="品牌名称：" prop="name">
                  <el-input v-model="brand.name"></el-input>
                </el-form-item>
                <el-form-item label="品牌首字母"  prop="firstLetter">
                  <el-input v-model="brand.firstLetter"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO：" prop="logo">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌专区大图" prop="upload">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌故事" prop="brandStory" >
                  <el-input
                    placeholder="请输入内容"
                    type="textarea"
                    v-model="brand.brandStory"
                    :autosize="true"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                  <el-input v-model.number="brand.sort"></el-input>
                </el-form-item>
                <el-form-item label="是否显示：">
                  <el-radio-group v-model="brand.showStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="品牌制造商：" prop="factoryStatus">
                  <el-radio-group v-model="brand.factoryStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit('brand')">提交</el-button>
                  <el-button  v-if="!isEdit" @click="resetForm('brand')">重置</el-button>
                </el-form-item>
              </el-form>
        </section>
  </div>
</template>
<script>
  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
          brand:{
            bigPic: '',
            brandStory: '',
            factoryStatus: 0,
            firstLetter: '',
            logo: '',
            name: '',
            showStatus: 0,
            sort: 0,
            upload: ''
        },
        fileList: [],
        rules: {
          name: [
            {required: true, message: '请输入品牌名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          logo: [
            {required: true, message: '请输入品牌logo', trigger: 'blur'}
          ],
          sort: [
            {type: 'number', message: '排序必须为数字'}
          ]
        }
      }
    },
    
    methods: {
      onSubmit() {
      
      },
      resetForm() {
      
      },
      handlePreview(file) {
				console.log(file);
      },
      handleRemove(file, fileList) {
				console.log(file, fileList);
			}
    }
  }
</script>
<style>
.container-main-header .el-icon-pear{
  float: right;
  line-height: 50px;
  margin-right: 20px;
}
.container-main-header {
  text-align: left;
  /* padding: 0 20px; */
  width: 100%;
  display: flex;
  flex-direction: column;
}
.header-left {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.header-left span{
  margin: 5px;
  font-size: 14px;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}
.main{
  width: 800px;
  height: 884px;
  border: 1px solid #cccccc;
  margin: 20px auto;
  padding: 40px;
}
</style>


